<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<link rel="stylesheet" type="text/css" href="style/css.css" />
	<script type="text/javascript">

		/*
		 * 定义一个函数，专门用来为指定元素绑定单击响应函数
		 * 	参数：
		 * 		idStr 要绑定单击响应函数的对象的id属性值
		 * 		fun 事件的回调函数，当单击元素时，该函数将会被触发
		 */
		function myClick(idStr, fun) {
			var btn = document.getElementById(idStr);
			btn.onclick = fun;
		}

		window.onload = function () {

			//为id为btn01的按钮绑定一个单击响应函数
			var btn01 = document.getElementById("btn01");
			btn01.onclick = function () {
				//查找#bj节点
				var bj = document.getElementById("bj");
				//打印bj
				//innerHTML 通过这个属性可以获取到元素内部的html代码
				alert(bj.innerHTML);
			};


			//为id为btn02的按钮绑定一个单击响应函数
			var btn02 = document.getElementById("btn02");
			btn02.onclick = function () {
				//查找所有li节点
				//getElementsByTagName()可以根据标签名来获取一组元素节点对象
				//这个方法会给我们返回一个类数组对象，所有查询到的元素都会封装到对象中
				//即使查询到的元素只有一个，也会封装到数组中返回
				var lis = document.getElementsByTagName("li");

				//打印lis
				//alert(lis.length);

				//变量lis
				for (var i = 0; i < lis.length; i++) {
					alert(lis[i].innerHTML);
				}
			};


			//为id为btn03的按钮绑定一个单击响应函数
			var btn03 = document.getElementById("btn03");
			btn03.onclick = function () {
				//查找name=gender的所有节点
				var inputs = document.getElementsByName("gender");

				//alert(inputs.length);

				for (var i = 0; i < inputs.length; i++) {
					/*
					 * innerHTML用于获取元素内部的HTML代码的
					 * 	对于自结束标签，这个属性没有意义
					 */
					//alert(inputs[i].innerHTML);
					/*
					 * 如果需要读取元素节点属性，
					 * 	直接使用 元素.属性名
					 * 		例子：元素.id 元素.name 元素.value
					 * 		注意：class属性不能采用这种方式，
					 * 			读取class属性时需要使用 元素.className
					 */
					alert(inputs[i].className);
				}
			};

			//为id为btn04的按钮绑定一个单击响应函数
			var btn04 = document.getElementById("btn04");
			btn04.onclick = function () {

				//获取id为city的元素
				var city = document.getElementById("city");

				//查找#city下所有li节点
				var lis = city.getElementsByTagName("li");

				for (var i = 0; i < lis.length; i++) {
					alert(lis[i].innerHTML);
				}

			};

			//为id为btn05的按钮绑定一个单击响应函数
			var btn05 = document.getElementById("btn05");
			btn05.onclick = function () {
				//获取id为city的节点
				var city = document.getElementById("city");
				//返回#city的所有子节点
				/*
				 * childNodes属性会获取包括文本节点在呢的所有节点
				 * 根据DOM标签标签间空白也会当成文本节点
				 * 注意：在IE8及以下的浏览器中，不会将空白文本当成子节点，
				 * 	所以该属性在IE8中会返回4个子元素而其他浏览器是9个
				 */
				var cns = city.childNodes;

				//alert(cns.length);

				/*for(var i=0 ; i<cns.length ; i++){
					alert(cns[i]);
				}*/

				/*
				 * children属性可以获取当前元素的所有子元素
				 */
				var cns2 = city.children;
				alert(cns2.length);
			};

			//为id为btn06的按钮绑定一个单击响应函数
			var btn06 = document.getElementById("btn06");
			btn06.onclick = function () {
				//获取id为phone的元素
				var phone = document.getElementById("phone");
				//返回#phone的第一个子节点
				//phone.childNodes[0];
				//firstChild可以获取到当前元素的第一个子节点（包括空白文本节点）
				var fir = phone.firstChild;

				//firstElementChild获取当前元素的第一个子元素
				/*
				 * firstElementChild不支持IE8及以下的浏览器，
				 * 	如果需要兼容他们尽量不要使用
				 */
				//fir = phone.firstElementChild;

				alert(fir);
			};

			//为id为btn07的按钮绑定一个单击响应函数
			myClick("btn07", function () {

				//获取id为bj的节点
				var bj = document.getElementById("bj");

				//返回#bj的父节点
				var pn = bj.parentNode;

				alert(pn.innerHTML);

				/*
				 * innerText
				 * 	- 该属性可以获取到元素内部的文本内容
				 * 	- 它和innerHTML类似，不同的是它会自动将html去除
				 */
				//alert(pn.innerText);


			});


			//为id为btn08的按钮绑定一个单击响应函数
			myClick("btn08", function () {

				//获取id为android的元素
				var and = document.getElementById("android");

				//返回#android的前一个兄弟节点（也可能获取到空白的文本）
				var ps = and.previousSibling;

				//previousElementSibling获取前一个兄弟元素，IE8及以下不支持
				//var pe = and.previousElementSibling;

				alert(ps);

			});

			//读取#username的value属性值
			myClick("btn09", function () {
				//获取id为username的元素
				var um = document.getElementById("username");
				//读取um的value属性值
				//文本框的value属性值，就是文本框中填写的内容
				alert(um.value);
			});


			//设置#username的value属性值
			myClick("btn10", function () {
				//获取id为username的元素
				var um = document.getElementById("username");

				um.value = "今天天气真不错~~~";
			});


			//返回#bj的文本值
			myClick("btn11", function () {

				//获取id为bj的元素
				var bj = document.getElementById("bj");

				//alert(bj.innerHTML);
				//alert(bj.innerText);

				//获取bj中的文本节点
				/*var fc = bj.firstChild;
				alert(fc.nodeValue);*/

				alert(bj.firstChild.nodeValue);


			});

		};


	</script>
</head>

<body>
	<div id="total">
		<div class="inner">
			<p>
				你喜欢哪个城市?
			</p>

			<ul id="city">
				<li id="bj">北京</li>
				<li>上海</li>
				<li>东京</li>
				<li>首尔</li>
			</ul>

			<br>
			<br>

			<p>
				你喜欢哪款单机游戏?
			</p>

			<ul id="game">
				<li id="rl">红警</li>
				<li>实况</li>
				<li>极品飞车</li>
				<li>魔兽</li>
			</ul>

			<br />
			<br />

			<p>
				你手机的操作系统是?
			</p>

			<ul id="phone">
				<li>IOS</li>
				<li id="android">Android</li>
				<li>Windows Phone</li>
			</ul>
		</div>

		<div class="inner">
			gender:
			<input class="hello" type="radio" name="gender" value="male" />
			Male
			<input class="hello" type="radio" name="gender" value="female" />
			Female
			<br>
			<br>
			name:
			<input type="text" name="name" id="username" value="abcde" />
		</div>
	</div>
	<div id="btnList">
		<div><button id="btn01">查找#bj节点</button></div>
		<div><button id="btn02">查找所有li节点</button></div>
		<div><button id="btn03">查找name=gender的所有节点</button></div>
		<div><button id="btn04">查找#city下所有li节点</button></div>
		<div><button id="btn05">返回#city的所有子节点</button></div>
		<div><button id="btn06">返回#phone的第一个子节点</button></div>
		<div><button id="btn07">返回#bj的父节点</button></div>
		<div><button id="btn08">返回#android的前一个兄弟节点</button></div>
		<div><button id="btn09">返回#username的value属性值</button></div>
		<div><button id="btn10">设置#username的value属性值</button></div>
		<div><button id="btn11">返回#bj的文本值</button></div>
	</div>
</body>

</html>